<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap{width:700px;height:500px;}
        p{margin-left:5px; font-size:14px;}
        *{ padding:0; margin:0}
        body{font-size: 12px;}
        #toolbar{ background-color:#E5ECF9;zoom:1; height:30px; line-height:24px; padding:0 12px; margin-top:3px; position:relative}
        #toolbar a{display:inline-block;zoom:1;*display:inline; color:#4673CC}
        #toolbar a.mark,#toolbar a.map{ background: url(__IMG__/admin/map_mark.png) no-repeat left 50%; padding:0 0 0 20px}
        #toolbar a.map{ background-image:url(__IMG__/admin/icon/map.png); margin-left:12px}
        #toolbar .right{ float:right;}
        #toolbar .CityBox{position:absolute; left:40px; top:30px; background-color:#fff; border:1px solid #8BA4D8; padding:2px; z-index:1; width:200px; display:none}
        #toolbar .CityBox h4{background-color:#E5ECF9; line-height:20px; height:20px; padding:0 6px; color:#6688CC; position:relative}
        #toolbar .CityBox h4 div.top{background: url(__IMG__/admin/topo.png) no-repeat; height:6px; width:11px; position:absolute; top:-9px; left:38px; line-height:normal; font-size:0}
        #toolbar .CityBox .content{ padding:6px; height:150px;overflow-y:auto; padding-bottom:8px}
        #toolbar .CityBox a.close{background: url(__IMG__/admin/cross.png) no-repeat left 3px; display:block; width:16px; height:16px;position: absolute;outline:none;right:3px; bottom:1px}
        #toolbar .CityBox a.close:hover{background-position: left -46px}
        #toolbar .CityBox .line{ height:6px; border-bottom:1px solid #EBEBEB; margin-bottom:5px;}
    </style>
    <script type="text/javascript" src="__JS__/baidumap.js"></script>
    <title>添加坐标</title>
</head>
<body>
<div id="toolbar">
    <div class="selCity">
        <div class="right"><a onclick="addMarker();" class="mark" href="javascript:;">添加标注</a><a class="map" onclick="removeMarker();" href="javascript:;">重置地图</a></div>
        <strong id="curCity">郴州</strong> [ 搜索：<input type="text" onclick="$(this).val('');" id="citywd" name="citywd" style=" width:140px; height:18px;border:1px solid #ccc;" value="输入城市名">
        <input type="submit" onclick="keywordSearch()" class="city_submit" value="确定">]
    </div>
</div>
<input type="hidden" name="mapp" id="mapp" value="{$mappoint}" />
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var mapObj = new BMap.Map("allmap");
    //向地图中添加缩放控件
    var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
    mapObj.addControl(ctrl_nav);
    mapObj.enableDragging();//启用地图拖拽事件，默认启用(可不写)
    mapObj.enableScrollWheelZoom();//启用地图滚轮放大缩小
    mapObj.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
    mapObj.enableKeyboard();//启用键盘上下左右键移动地图
    var mappoint = '{$mappoint}';
    if(mappoint) {
        drawPoints(mappoint);
     } else {
        mapObj.centerAndZoom("{$defaultcity}",15);
  }
    //设置切换城市
    function keywordSearch() {
            var city=$("#citywd").val();
        if(city){
            mapObj.setCenter(city);
            $("#curCity").html(city);
        }
    }

    function drawPoints(mappoint){
        var data = mappoint;
        var data = data.split('|');
        var lngX = data[0];
        var latY = data[1];
        var zoom = data[2] ? data[2] : 10;
        mapObj.centerAndZoom(new BMap.Point(lngX,latY),zoom);
        // 创建图标对象
        var myIcon = new BMap.Icon('__IMG__/admin/mak.png', new BMap.Size(27, 45));

        // 创建标注对象并添加到地图
        var center = mapObj.getCenter();
        var point = new BMap.Point(lngX,latY);
        var marker = new BMap.Marker(point, {icon: myIcon});
        marker.enableDragging();
        mapObj.addOverlay(marker);
        var ZoomLevel = mapObj.getZoom();
        marker.addEventListener("dragend", function(e){
            $('#mapp').val(e.point.lng+'|'+e.point.lat+'|'+ZoomLevel);
        })
    }

    function addMarker(){
        mapObj.clearOverlays();
        // 创建图标对象
        var myIcon = new BMap.Icon('__IMG__/admin/mak.png', new BMap.Size(27, 45));

        // 创建标注对象并添加到地图
        var center = mapObj.getCenter();
        var point = new BMap.Point(center.lng,center.lat);
        var marker = new BMap.Marker(point, {icon: myIcon});
        marker.enableDragging();
        mapObj.addOverlay(marker);
        var ZoomLevel = mapObj.getZoom();
       $('#mapp').val(center.lng+'|'+center.lat+'|'+ZoomLevel);
        marker.addEventListener("dragend", function(e){
           $('#mapp').val(e.point.lng+'|'+e.point.lat+'|'+ZoomLevel);
        })
    }
    function removeMarker() {
        mapObj.clearOverlays();
        mapObj.centerAndZoom("{$defaultcity}");
        $("#curCity").html('{$defaultcity}');
        $('#mapp').val('');
    }
</script>
